<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2024-11-19 11:34:40
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-09-01 11:07:11
 * @FilePath: /XMate-h5/src/views/myXmate/components/customerListHead.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="flex flex-row justify-between items-center h-[70px] py-3 px-4">
    <div class="flex flex-row items-center gap-2 flex-auto">
      <div :class="`${isSearching ? 'w-full' : 'w-[120px]'} `">
        <van-search
          ref="searchInput"
          v-model="searchValue"
          :show-action="isSearching"
          background="transparent"
          placeholder="搜索关键词"
          @search="doSearch"
          @cancel="onCancel"
          @focus="onSearchFocus"
          @blur="onSearchBlur"
          @clear="onClear"
        />
      </div>

      <van-dropdown-menu v-if="!isSearching" class="filter-menu" active-color="#436BFF">
        <van-dropdown-item
          v-if="enableDrpt"
          v-model="currentDrpt"
          :options="reportTypeOptions"
          :title="drptTitle"
          @open="handleOpenDrptFilter"
        />
        <van-dropdown-item
          title="排序"
          v-model="orderType"
          :options="orderTypeOptions"
          @change="handleOrderTypeChange"
        />
      </van-dropdown-menu>
    </div>

    <template v-if="!isSearching">
      <slot v-if="!enableSearch" name="right"></slot>
    </template>
  </div>
</template>

<script setup>
import { ref, defineEmits, defineProps, computed } from "vue";
import { useCommonStore } from "@/store";
const commonStore = useCommonStore();

const emits = defineEmits([
  "search",
  "filter",
  "drptFilter",
  "update:searchValue",
  "orderTypeChange",
]);
const isSearching = ref(false);
const isToB = computed(() => {
  return commonStore.isToB;
});

defineProps({
  enableDrpt: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  drptTitle: {
    type: String,
    default: () => {
      return "全部部门";
    },
  },
});

const currentDrpt = ref("");
const currentReportTypeText = ref("全部部门");
const reportTypeOptions = ref([
  { text: "华中大区", value: 0 },
  { text: "华中1大区", value: 1 },
  { text: "华中2大区", value: 2 },
]);

function handleOrderTypeChange(v) {
  orderType.value = v;
  emits("orderTypeChange", v);
}

const orderType = ref("meetCount");
const orderTypeOptions = computed(() => {
  let array = [
    {
      text: "按创建时间",
      value: "created_time",
    },
    {
      text: "按风险个数",
      value: "riskCount",
    },
    {
      text: "按沟通次数",
      value: "meetCount",
      selected: true,
    },
    {
      text: "按待办个数",
      value: "todosCount",
    },
    {
      text: "按提及竞品个数",
      value: "competitorCount",
    },
  ];
  if (isToB) {
    array.push({
      text: "按参会个数",
      value: "attendeeCount",
    });
  }
  return array;
});

const searchValue = ref("");
const searchInput = ref(null);
const enableSearch = ref(false);

function handleOpenDrptFilter() {
  emits("drptFilter");
}

function onClear() {
  searchValue.value = "";
  doSearch("");
}

function doSearch() {
  console.log("doSearch", searchValue.value);
  emits("search", searchValue.value);
}

function onCancel() {
  console.log("cancel", searchValue.value);
  isSearching.value = false;
  enableSearch.value = false;
  doSearch("");
}

function onSearchFocus() {
  isSearching.value = true;
}

function onSearchBlur() {
  isSearching.value = false;
  enableSearch.value = false;
  doSearch("");
}
</script>

<style lang="less" scoped>
:deep(.van-dropdown-menu__bar) {
  height: 32px;
  background: transparent;
  box-shadow: none;
  gap: 8px;
}

:deep(.van-dropdown-menu__item) {
  padding: 0 8px;
  min-width: 80px;
  border: 1px solid #e9e9e9;
  border-radius: 8px;
  gap: 8px;

  .van-dropdown-menu__title {
    font-size: 14px;
    color: #333;

    &::after {
      border-color: transparent transparent #666 #666;
    }

    &--active {
      color: #436bff;
    }
  }
}

.van-search {
  flex-grow: 1;
  padding: 0;
}

:deep(.van-search__content) {
  background: white;
  border-radius: 8px;
  border: 1px solid #e9e9e9;
}
</style>
